<template>
  <div class="kuqu">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">上架任务</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen()">新增</el-button>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template scope="s">
            <el-button type="info" size="mini" @click="dialogSearchOpen(s.row)" icon="search"></el-button>
          </template>
        </el-table-column>
        <el-form-item label="ASN编号" prop="asnbh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_asnbh"
                    placeholder="ASN编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="cjsj">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_cjsj"
                    placeholder="创建时间" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="关联PO编号" prop="dycgdbh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_dycgdbh"
                    placeholder="关联PO编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商" prop="show_gysid">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_show_gysid"
                    placeholder="供应商" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="收货时间" prop="shsj">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_shsj"
                    placeholder="收货时间" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <s-table :table="tableMx" ref="table"></s-table>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogSearch" :close="dialogSearch">
      <p slot="title">{{dialogSearch.title}}任务详情</p>
      <s-table :table="tableSearch" ref="tableSearch"></s-table>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';

  function __form () {
    return {
      mc: { value: '', rule: [ 'vNull' ], search: true },
      bz: { value: '', rule: [], search: false },
      dm: { value: '', rule: [ 'vNull' ], cRemarks: '' },
    };
  }
  export default AutoVue({
    name: 'base_kuqu-FEcarWms',
    store: ['USER'],
    data: {
      table: {
        column:
          [
            { label: '仓库',
              prop: 'ckmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货主',
              prop: 'hzmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: 'ASN编号',
              prop: 'asnbh',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '质检状态',
              prop: 'show_zjzt',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: 'ASN类型',
              prop: 'show_asnlx',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: 'ASN状态',
              prop: 'show_asnzt',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '优先级',
              prop: 'show_yxj',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '预计到货时间',
              prop: 'yjdhsj',
              minWidth: '0px',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              type: 'DateRange',
              cRemarks: '',
              search: false },
            { label: '创建时间',
              prop: 'cjsj',
              minWidth: '0px',
              cRemarks: '',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              type: 'DateRange',
              search: true },
            { label: '审核状态',
              prop: 'show_show_shzt',
              minWidth: '0px',
              cRemarks: '0未审核 1已审核',
              search: false },
            { label: '关联PO编号',
              prop: 'dycgdbh',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '制单人',
              prop: 'zdr',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '审核人',
              prop: 'ddshr',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '码盘状态',
              prop: 'show_show_mpzt',
              minWidth: '0px',
              cRemarks: '0.未码盘 1.码盘',
              search: false },
            { label: '收货时间',
              prop: 'shsj',
              minWidth: '0px',
              cRemarks: '',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              type: 'DateRange',
              search: true },
          ],
        url: '/wmsshelves/list',
        key: 'id',
        tableColumn: 4,
        muti: false,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        row: {},
      },
      dialogSearch: {
        title: '查看',
        size: 'large',
      },
      tableMx: {
        column:
          [
            { label: '仓库',
              prop: 'ckmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货主',
              prop: 'hzmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: 'ASN编号',
              prop: 'asnbh',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: 'ASN类型',
              prop: 'show_asnlx',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: 'ASN状态',
              prop: 'show_asnzt',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '优先级',
              prop: 'show_yxj',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '预计到货时间',
              prop: 'yjdhsj',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '创建时间',
              prop: 'cjsj',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '审核状态',
              prop: 'show_show_shzt',
              minWidth: '0px',
              cRemarks: '0未审核 1已审核',
              search: false },
            { label: '关联PO编号',
              prop: 'dycgdbh',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '制单人',
              prop: 'zdr',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '审核人',
              prop: 'ddshr',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '码盘状态',
              prop: 'show_show_mpzt',
              minWidth: '0px',
              cRemarks: '0.未码盘 1.码盘',
              search: false },
            { label: '收货时间',
              prop: 'shsj',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '供应商',
              prop: 'show_gysid',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '货品编号',
              prop: 'show_bh',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品名称',
              prop: 'show_mc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '收货库位',
              prop: 'show_kwid',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '批次号',
              prop: 'show_hppc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '生产日期',
              prop: 'show_scrq',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '数量',
              prop: 'sjsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '操作人',
              prop: 'czr',
              minWidth: '0px',
              cRemarks: '',
              search: false } ],
      },
      tableSearch: {
        column:
          [
            { label: '托盘码',
              prop: 'lpn',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品编号',
              prop: 'show_bh',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '货品名称',
              prop: 'show_mc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '上架库位',
              prop: 'show_kwid',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '批次号',
              prop: 'show_hppc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '生产日期',
              prop: 'show_scrq',
              minWidth: '0px',
              cRemarks: '',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              type: 'DateRange',
              search: false },
            { label: '预期数',
              prop: 'yqsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '收货数',
              prop: 'sl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '样品数量',
              prop: 'ypsl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '操作人员',
              prop: 'czr',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '操作时间',
              prop: 'czsj',
              minWidth: '0px',
              cRemarks: '',
              formatter: (row, column) => {
                return this.a.methods.formatterTime(row[column.property || column], 6);
              },
              type: 'DateRange',
              search: false },
          ],
        url: '/wmsshelves/selectRw',
        option: {
          yqdhbdid: '',
        },
        tableColumn: 5,
      },
    },
    transition: 'slide-fade',
    methods: {
      dialogInit () {
        this.dialog.row = {};
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (type, more) {
        this.dialog.title = '新增';
        this.dialog.visible = true;
      },
      dialogSave () {
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            try {
              await this.post('/wmslibraryarea/add', option);
              this.tableWatch('table');
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
      dialogSearchOpen (row) {
        if (this.dialogSearch.title === '查看') {
          this.tableSearch.option.yqdhbdid = row.yqdhbdid;
          this.tableSearch.url = '/wmsshelves/selectRw';
          this.tableWatch('tableSearch');
          this.dialogSearch.visible = true;
        }
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">

</style>
